<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECahrt 示例</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
			<link rel="stylesheet" href="../../css/global.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			
			h5:first-child {
				margin-top: 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav headerstyle">
			<a class="mui-action-back astyle"><img src="../../images/drawable-hdpi/head_back.png"/></a>
			<h1 class="mui-title">工作日志</h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<div class="chart" id="barChart"></div>
			</div>
			<div id="slider" class="mui-slider mui-fullscreen" style="padding-top: 280px;">
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										<span style="font-size: 16px;color: black;">2016.02.19 23.33L/100km</span><br/>
										<span style="font-size: 12px;color: grey">里程：30.0km &nbsp;油耗量：7.0L</span><br/>
										<span style="font-size: 12px;color: grey">尿素燃油比：0.00 &nbsp;尿素消耗量：0.0</span>
									</li>
									<li class="mui-table-view-cell">
										<span style="font-size: 16px;color: black;">2016.02.18 23.33L/100km</span><br/>
										<span style="font-size: 12px;color: grey">里程：30.0km &nbsp;油耗量：7.0L</span><br/>
										<span style="font-size: 12px;color: grey">尿素燃油比：0.00 &nbsp;尿素消耗量：0.0</span>
									</li>
									<li class="mui-table-view-cell">
										<span style="font-size: 16px;color: black;">2016.02.17 23.33L/100km</span><br/>
										<span style="font-size: 12px;color: grey">里程：30.0km &nbsp;油耗量：7.0L</span><br/>
										<span style="font-size: 12px;color: grey">尿素燃油比：0.00 &nbsp;尿素消耗量：0.0</span>
									</li>
									<li class="mui-table-view-cell">
										<span style="font-size: 16px;color: black;">2016.02.16 23.33L/100km</span><br/>
										<span style="font-size: 12px;color: grey">里程：30.0km &nbsp;油耗量：7.0L</span><br/>
										<span style="font-size: 12px;color: grey">尿素燃油比：0.00 &nbsp;尿素消耗量：0.0</span>
									</li>
									<li class="mui-table-view-cell">
										<span style="font-size: 16px;color: black;">2016.02.15 23.33L/100km</span><br/>
										<span style="font-size: 12px;color: grey">里程：30.0km &nbsp;油耗量：7.0L</span><br/>
										<span style="font-size: 12px;color: grey">尿素燃油比：0.00 &nbsp;尿素消耗量：0.0</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../libs/echarts-all.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script>
			mui.init();
			(function($) {
					//阻尼系数
					var deceleration = mui.os.ios?0.003:0.0009;
					$('.mui-scroll-wrapper').scroll({
						bounce: false,
						indicators: true, //是否显示滚动条
						deceleration:deceleration
					});
					$.ready(function() {
						//循环初始化所有下拉刷新，上拉加载。
						$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
							$(pullRefreshEl).pullToRefresh({
								/*down: {
									callback: function() {
										var self = this;
										setTimeout(function() {
											var ul = self.element.querySelector('.mui-table-view');
											ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
											self.endPullDownToRefresh();
										}, 1000);
									}
								},*/
								up: {
									callback: function() {
										var self = this;
										setTimeout(function() {
											var ul = self.element.querySelector('.mui-table-view');
											ul.appendChild(createFragment(ul, index, 5));
											self.endPullUpToRefresh();
										}, 1000);
									}
								}
							});
						});
						var createFragment = function(ul, index, count, reverse) {
							var length = ul.querySelectorAll('li').length;
							var fragment = document.createDocumentFragment();
							var li;
							for (var i = 0; i < count; i++) {
								li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
								fragment.appendChild(li);
							}
							return fragment;
						};
					});
				})(mui);
		</script>
		<script>
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
				} : {
					legend: {
						data: ['油耗','里程', '百公里油耗']
					},
					grid: {
						x: 50,
						x2: 60,
						y: 50,
						y2: 25
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: false
							},
							dataView: {
								show: false,
								readOnly: false
							},
							magicType: {
								show: false,
								type: ['line', 'bar']
							},
							restore: {
								show: false
							},
							saveAsImage: {
								show: false
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						name:'月份',
						data: ['15', '16', '17', '18', '19', '20', '21']
					}],
					yAxis: [{
						type: 'value',
						name: '油耗',
						min: 0,
						max: 250,
						interval: 50,
						axisLabel: {
							formatter: '{value}'
						}
					}, {
						type: 'value',
						name: '百公里油耗',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}'
						}
					}],
					series: [
						{
							name: '油耗',
							type: 'bar',
							data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
						},
						{
							name: '里程',
							type: 'bar',
							data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
						},
						{
							name: '百公里油耗',
							type: 'line',
							yAxisIndex: 1,
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3]
						}
					]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var barChart = echarts.init(byId('barChart'));
			barChart.setOption(getOption('bar'));
		</script>
	</body>

</html>